import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const Pie3 = () => {

  const option = {

      series: [
          {
              name: ' 现有公司（家）',
              type: 'pie',
              radius: ['50%', '60%'],//内外半径
              center: ['30%', '70%'],//圆心横纵坐标
              startAngle: 225,
              color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00a2ff'
              }, {
                  offset: 1,
                  color: '#70ffac'
              }]), "transparent"],
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              label: {
                      normal: {
                          position: 'center'
                      }
                  },
              data: [{
                  value: 75,
                   name: '现有公司',
                      label: {
                          normal: {
                              formatter: '现有公司',
                              textStyle: {
                                  color: '#fff',
                                  fontSize: 16

                              }
                          }
                      }
              }, {
                  value: 25,
                  name: '%',
                      label: {
                          normal: {
                              formatter: '\n35',
                              textStyle: {
                                  color: '#007ac6',
                                  fontSize: 20

                              }
                          }
                      }
              },
              {
                  value: 0,
                  name: '%',
                      label: {
                          normal: {
                              formatter: '家',
                              textStyle: {
                                  color: '#fff',
                                  fontSize: 16

                              }
                          }
                      }
              }]
          },
           {
              name: '总人数',
              type: 'pie',
              radius: ['50%', '60%'],//内外半径
              center: ['70%', '70%'],//圆心横纵坐标
              startAngle: 225,
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              label: {
                      normal: {
                          position: 'center'
                      }
                  },
              data: [{
                  value: 75,
                  "itemStyle": {
                      "normal": {
                          "color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              "offset": 0,
                              "color": '#0f56f4'
                          }, {
                              offset: 0,
                              color: '#2dcbff'
                          }]),
                      }
                  },
                   name: '总人数',
                      label: {
                          normal: {
                              formatter: '总人数',
                              textStyle: {
                                  color: '#fff',
                                  fontSize: 16

                              }
                          }
                      }
              }, {
                  value: 25,
                  name: '%',
                      label: {
                          normal: {
                              formatter: '\n8353',
                              textStyle: {
                                  color: '#0f56f4',
                                  fontSize: 20

                              }
                          }
                      }
              },
              {
                  value: 0,
                  name: '%',
                      label: {
                          normal: {
                              formatter: '人',
                              textStyle: {
                                  color: '#fff',
                                  fontSize: 16

                              }
                          }
                      }
              }]
          },
      ]
  };

  return (
    <div>
      <ReactEcharts
        option={option}
        style={{height: '30vh', width: '100%'}}
       />
    </div>
  );
}
export default Pie3;
